vue |
您所在的位置：网站首页 › vue 列表选择 › vue |
vue
|
介绍
draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。 安装 1.首先，你需要有一个由vue-cil创建的vue项目，我这里使用我的一个开源前端进行展示，需要可自取。传送门然后执行如下命令。 yarn add vuedraggable 或者 npm i -S vuedraggable 出现下图信息即为完成。 1.import draggable from "vuedraggable" 2.components: { draggable }, 具体如下： vue-draggable组件展示 import draggable from "vuedraggable" export default { name: "slidingList", components: { draggable }, props: { menu: '', }, data() { return { } }, methods: { }, mounted() { } } #view { width: 100%; height: 100%; padding: 0px; margin: 0px; margin-top: 0.9375rem; } 3. 添加组件使用与样式直接给出具体代码大家看一下吧： vue-draggable组件展示 蜀国 {{item.name}} 吴国 {{item.name}} 魏国 {{item.name}} import draggable from "vuedraggable" export default { name: "slidingList", components: { draggable }, props: { menu: '', }, data() { return { drag:false, //定义要被拖拽对象的数组 arr1:[ {id:1,name:'张飞'}, {id:2,name:'诸葛亮'}, {id:3,name:'刘备'}, {id:4,name:'关羽'} ], arr2:[ {id:5,name:'曹操'}, {id:6,name:'曹丕'}, {id:7,name:'张辽'}, {id:8,name:'郭嘉'} ], arr3:[ {id:9,name:'孙权'}, {id:10,name:'周瑜'}, {id:11,name:'鲁肃'}, {id:12,name:'陆逊'} ] } }, methods: { //开始拖拽事件 onStart(){ this.drag=true; }, //拖拽结束事件 onEnd() { this.drag=false; }, }, mounted() { } } #view { width: 100%; height: 100%; padding: 0px; margin: 0px; margin-top: 0.9375rem; } /*定义要拖拽元素的样式*/ .ghostClass{ background-color: blue !important; } .chosenClass{ background-color: red !important; opacity: 1!important; } .dragClass{ background-color: blueviolet !important; opacity: 1 !important; box-shadow:none !important; outline:none !important; background-image:none !important; } .itxst{ margin: 10px; } .title{ padding: 6px 12px; } .col{ width: 40%; flex: 1; padding: 10px; border: solid 1px #eee; border-radius:5px ; float: left; } .col+.col{ margin-left: 10px; } .item{ padding: 6px 12px; margin: 0px 10px 0px 10px; border: solid 1px #eee; background-color: #f1f1f1; } .item:hover{ background-color: #fdfdfd; cursor: move; } .item+.item{ border-top:none ; margin-top: 6px; }具体样式：
有几个指定注意的地方需要跟大家说一下： 如上列子中这三个数组中如果有一个被全部拖拽出去了。在想将其他的拖进来会比较困难，因为‘可选择空间’会非常小。该组件还有很多响应事件和功能没有分享到，大家可以去这个网站查看相关api。点击进入该组件支持的数组列是无上限的。如需要多个可以自行添加。该例子后期将会同步更新到我的GitHub。传送门如果觉得有帮助的话给个免费的点赞吧，Thanks♪(･ω･)ﾉ |
【本文地址】
今日新闻 |
推荐新闻 |